<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/4/17
  Time: 19:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>藏文用户管理</title>
    <link href="${pageContext.request.contextPath}/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/font-awesome.min93e3.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/style.min.css?v=4.1.0" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/plugins/jsTree/style.min.css" rel="stylesheet">
</head>
<style>
    .admin-so{
        height: 30px;
        line-height: 40px;
        margin-bottom: 10px;
    }

    .admin-so-text a {
        margin-right: 10px;
    }
</style>

<body>

<div class="wrapper wrapper-content container-fluid">

    <div class="row" id="row1">
        <input type="hidden" id="areaid" value="0">
        <div class="col-md-5">
            <div class="admin-so"><i class="fa fa-search"></i> 用户筛选</div>
            <table class="table admin-so-text" id="a-table">
                <tr>
                    <td width="80">状态：</td>
                    <td>
                        <a class="text-success font-bold" href="javascript:void(0);" onclick="UserType(1)">全部</a>
                        <a class="text-muted" href="javascript:void(0);" onclick="UserType(2)">正常使用</a>
                        <a class="text-muted" href="javascript:void(0);" onclick="UserType(3)">到期</a>
                        <a class="text-muted" href="javascript:void(0);" onclick="UserType(4)">停用</a>
                    </td>
                </tr>
            </table>
        </div>
        <div class="col-md-3">
            <div class="admin-so"><i class="fa fa-search"></i> 用户搜索</div>
            <form action="" method='get'>
                <div class="input-group">
                    <input type="text" class="form-control" name='keywords' placeholder="请输入用户名或手机号搜索" value=''>
                    <span class="input-group-btn">
                        <button class="btn btn-primary" type="submit">搜索</button>
                    </span>
                </div>
            </form>
        </div>
        <div class="col-md-1 ">
            <div class="admin-so"><i class="fa fa-group"></i> 用户分组</div>
            <button type="button" id="test" class="btn btn-primary" onclick='GroupUser()'>用户分组</button>
        </div>
        <div class="col-md-1 ">
            <div class="admin-so"><i class="fa fa-lock"></i> 用户权限</div>
            <button id="" class="btn btn-info" onclick='JurUser()'>用户权限</button>
        </div>
        <div class="col-md-1 ">
            <div class="admin-so"><i class="fa fa-user-plus"></i> 新增用户</div>
            <button class="btn btn-success" onclick='AddUser()'>新增用户</button>
        </div>
        <div class="col-md-1 ">
            <div class="admin-so"><i class="fa fa-user-times"></i> 删除用户</div>
            <button id="deluser" class="btn btn-danger" onclick='DelUser()'>删除用户</button>
        </div>
    </div>
    <div class="row">
        <div class="col-md-2 " style="padding: 0 3px;width: 10%">
            <div id="jstree1"></div>
        </div>
        <div class="col-md-10" style="padding-left: 3px;width: 89%">
            <table id="usertable" data-mobile-responsive="true"></table>
        </div>
    </div>
</div>


<script src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/static/layer/layer.js"></script>
<script src="${pageContext.request.contextPath}/static/js/content.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/plugins/jsTree/jstree.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/plugins/bootstrap-table/bootstrap-table.js"></script>
<script src="${pageContext.request.contextPath}/static/js/plugins/bootstrap-table/bootstrap-table-mobile.js"></script>
<script src="${pageContext.request.contextPath}/static/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>


<script type="text/javascript">
    var $ztable = $('#usertable');

    $ztable.bootstrapTable({
        url: '/NAreaUser?type=2',
        method: 'get',
        striped: true,
        cache: false,
        height: getHeight(),
        pagination: true,
        sidePagination: "client",
        queryParams: function (params) { // 请求服务器数据时发送的参数，可以在这里添加额外的查询参数，返回false则终止请求

        },
        pageNumber: 1,
        pageSize: 15,
        pageList: [10, 15, 25],
        clickToSelect: true,
        uniqueId: "id",
        columns: [
            {
                checkbox: true
            }, {
                field: 'id',
                title: 'ID'
            }, {
                field: 'username',
                title: '用户名'
            }, {
                field: 'tel',
                title: '手机号'
            }, {
                field: 'card',
                title: '身份证'
            }, {
                field: 'place',
                title: '地址'
            }, {
                field: 'drivename',
                title: '驾校名称'
            }, {
                field: 'studysub',
                title: '学习科目'
            }, {
                field: 'money',
                title: '学费'
            }, {
                field: 'timelimit',
                title: '会员期限',
                formatter: function (value) {
                    if (value === null) {
                        return "-";
                    } else {
                        var crtTime = new Date(parseInt(value) * 1000);
                        return timeformat("yyyy-MM-dd", crtTime);
                    }
                }
            }, {
                field: 'ip',
                title: '最近登录ip'
            }, {
                field: 'updatetime',
                title: '最近登录时间',
                formatter: function (value) {
                    if (value === null) {
                        return "-";
                    } else {
                        var crtTime = new Date(parseInt(value) * 1000);
                        return timeformat("yyyy-MM-dd hh:mm:ss", crtTime);
                    }
                }
            }, {
                title: "操作",
                clickToSelect: false,
                formatter: function (value, row) {
                    if (row.status === 1) {
                        return '<a class="btn btn-xs btn-primary" style="margin: 0 1px" href="javascript:void(0);" onclick=\'EditUser(' + row.id + ')\'>编辑</a>' +
                            '<a class="btn btn-xs btn-info" style="margin: 0 1px" href="javascript:void(0);" onclick=\'ResetPass(' + row.id + ')\'>重置密码</a>' +
                            '<a class="btn btn-xs btn-danger" href="javascript:void(0);" onclick="Edit(' + row.id + '\,' + 0 + ')">禁用</a>';
                    } else if (row.status === 0) {
                        return '<a class="btn btn-xs btn-primary" style="margin: 0 1px" href="javascript:void(0);" onclick=\'EditUser(' + row.id + ')\'>编辑</a>' +
                            '<a class="btn btn-xs btn-info" style="margin: 0 1px" href="javascript:void(0);" onclick=\'ResetPass(' + row.id + ')\'>重置密码</a>' +
                            '<a class="btn btn-xs btn-success" href="javascript:void(0);" onclick="Edit(' + row.id + '\,' + 1 + ')">启用</a>';
                    }
                    return false;
                }
            }]
    });

    function getHeight() {
        return $(window).height() - $('#row1').outerHeight(true)-46;
    }

    $(window).resize(function () {
        $ztable.bootstrapTable('resetView', {
            height: getHeight()
        });
    });

    //格式化时间
    function timeformat(fmt, date) {
        var o = {
            "M+": date.getMonth() + 1,                 //月份
            "d+": date.getDate(),                    //日
            "h+": date.getHours(),                   //小时
            "m+": date.getMinutes(),                 //分
            "s+": date.getSeconds(),                 //秒
            "S": date.getMilliseconds()             //毫秒
        };
        if (/(y+)/.test(fmt))
            fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt))
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    }


    //更改状态
    function Edit(id, status) {
        var ajax1 = {
            type: 'put',
            url: "/user",
            data: {id: id, status: status},
            dataType: 'json',
            success: function (json) {
                if (json.status === "success") {
                    layer.msg('操作成功', {icon: 1, time: 1000});
                    $('#usertable').bootstrapTable('refresh');
                } else {
                    layer.msg(json.status, {icon: 2, time: 1000});
                }
            },
            error: function () {
                layer.msg('服务器繁忙，请刷新页面后重试', {icon: 5, time: 1000});
            }
        };
        if (status === 1) {
            layer.confirm('确定是否启用', {
                btn: ['确定', '取消'] //按钮
            }, function () {
                $.ajax(ajax1);
            }, function () {
                layer.msg('取消操作成功', {icon: 1, time: 1000});
            });
        } else if (status === 0) {
            layer.confirm('确定是否禁用', {
                btn: ['确定', '取消'] //按钮
            }, function () {
                $.ajax(ajax1);
            }, function () {
                layer.msg('取消操作成功', {icon: 1, time: 1000});
            });
        }
    }

    //    重置密码
    function ResetPass(id) {
        layer.confirm('确定是否重置密码', {
            btn: ['确定', '取消'] //按钮
        }, function () {
            $.ajax({
                type: 'put',
                url: "/user/reset",
                data: {id: id},
                dataType: 'json',
                success: function (json) {
                    if (json.status === "success") {
                        layer.msg('操作成功', {icon: 1, time: 1000});
                    } else {
                        layer.msg(json.status, {icon: 2, time: 1000});
                    }
                },
                error: function () {
                    layer.msg('服务器繁忙，请刷新页面后重试', {icon: 5, time: 1000});
                }
            });
            $('#usertable').bootstrapTable('refresh');
        }, function () {
            layer.msg('取消操作成功', {icon: 1, time: 1000});
        });
    }

    //    删除用户
    function DelUser() {
        var ids = $.map($("#usertable").bootstrapTable('getSelections'), function (row) {
            return row.id;
        });
        if (ids.length === 0) {
            layer.msg('请选择数据')
        } else {
            layer.confirm('确定是否删除用户', {
                btn: ['确定', '取消'] //按钮
            }, function () {
                $.ajax({
                    contentType: 'application/json;charset=UTF-8',
                    type: 'delete',
                    url: "/user",
                    data: JSON.stringify(ids),
                    dataType: 'json',
                    success: function (json) {
                        if (json.status === "success") {
                            layer.msg('操作成功', {icon: 1, time: 1000});
                            $('#usertable').bootstrapTable('refresh');
                        } else {
                            layer.msg(json.status, {icon: 2, time: 1000});
                        }
                    },
                    error: function () {
                        layer.msg('服务器繁忙，请刷新页面后重试', {icon: 5, time: 1000});
                    }
                });
            }, function () {
                layer.msg('取消操作成功', {icon: 1, time: 1000});
            });
        }
    }


    //    用户分组
    function GroupUser() {
        var ids = $.map($("#usertable").bootstrapTable('getSelections'), function (row) {
            return row.id;
        });
        if (ids.length === 0) {
            layer.msg('请选择数据')
        } else {
            var ind = layer.open({
                type: 2,
                title: '用户分组',
                area: ['300px', '450px'],
                fixed: false, //不固定
                maxmin: false,
                content: '/page/user/group_user.jsp',
                btn: ['<i class="fa fa-check"></i> 确定', '<i class="fa fa-close"></i> 关闭'],
                yes: function (index, layero) {
                    var iframeWin = window[layero.find('iframe')[0]['name']];//得到iframe页的窗口对象，执行iframe页的方法：
                    var arr = iframeWin.getIds();
                    var ss = [];
                    for (var j = 0; j < ids.length; j++) {
                        for (var i = 0; i < arr.length; i++) {
                            ss[i + j * arr.length] = {};
                            ss[i + j * arr.length].uid = ids[j];
                            ss[i + j * arr.length].aid = arr[i].id;
                        }
                    }
                    //按钮【按钮一】的回调
                    $.ajax({
                        contentType: 'application/json;charset=UTF-8',
                        type: 'post',
                        url: "/area/relateUser",
                        data: JSON.stringify(ss),
                        dataType: 'json',
                        success: function () {
                            $('#usertable').bootstrapTable('refresh');
                            layer.msg('操作成功', {icon: 1, time: 1000});
                            layer.close(ind);
                        }
                    });
                }
                , btn2: function () {
                    //按钮【按钮二】的回调
                    layer.msg('取消操作成功', {icon: 1, time: 1000});
                }
            });
        }
    }

    //    用户选题
    function JurUser() {
        var ids = $.map($("#usertable").bootstrapTable('getSelections'), function (row) {
            return row.id;
        });
        if (ids.length === 0) {
            layer.msg('请选择数据')
        } else {
            layer.open({
                type: 2,
                title: '新增用户',
                area: ['80%', '90%'],
                fixed: false, //不固定
                maxmin: false,
                content: '/page/user/selectsubject_user.jsp'
                /*btn: ['<i class="fa fa-check"></i> 确定', '<i class="fa fa-close"></i> 关闭'],
                yes: function (index, layero) {
                    //按钮【按钮一】的回调
                    layer.msg('操作成功', {icon: 1, time: 1000});
                    layer.close(ind);
                }
                , btn2: function (index, layero) {
                    //按钮【按钮二】的回调
                    layer.msg('取消操作成功', {icon: 1, time: 1000});
                }*/
            })
        }
    }

    //    新增用户
    function AddUser() {

        layer.open({
            type: 2,
            title: '新增用户',
            area: ['800px', '90%'],
            fixed: false, //不固定
            maxmin: true,
            content: '/page/user/add_user.jsp'
        });
    }

    //    编辑用户
    function EditUser(id) {
        var aa = $('#usertable').bootstrapTable('getRowByUniqueId', id);
        layer.open({
            type: 2,
            title: '编辑用户',
            area: ['800px', '90%'],
            fixed: false, //不固定
            maxmin: true,
            content: "/page/user/edit_user.jsp",
            success: function (layero, index) {
                var body = layer.getChildFrame('body', index);
                body.find("input[name='username']").val(aa.username);
                body.find("input[name='tel']").val(aa.tel);
                body.find("input[name='card']").val(aa.card);
                body.find("input[name='studysub']").val(aa.studysub);
                body.find("input[name='place']").val(aa.place);
                body.find("input[name='money']").val(aa.money);
                body.find("input[name='drivename']").val(aa.drivename);
                body.find("input[name='timelimit']").val(aa.timelimit);
            }
        });
    }


    //        jstree
    $(document).ready(function () {
        /**
         * 获取分组的树
         * @type {Array}
         */
        var ss = [];
        $.ajax({
            url: '/area',
            type: 'GET',
            dataType: "json",
            success: function (result) {
                var jis = 0;
                for (var i = 0; i < result.data.length; i++) {
                    jis++;
                    if (result.data[i].parent === 0) {
                        result.data[i].parent = "#";
                    }
                    ss[i] = {};
                    ss[i].id = result.data[i].id;
                    ss[i].parent = result.data[i].parent;
                    ss[i].text = result.data[i].name;
                    ss[i].type = result.data[i].type;
                }
                ss[jis] = {};
                ss[jis].id = 0;
                ss[jis].parent = "#";
                ss[jis].text = "未分组";
                ss[jis].type = 1;
                $('#jstree1').jstree({
                    'core': {
                        'data': ss
                    },
                    "sort": false,
                    "plugins": ["types", "wholerow"],
                    "types": {
                        "default": {"icon": "fa fa-folder"},
                        "file": {"icon": "fa fa-file"}
                    }
                });
                $('#jstree1').on("changed.jstree", function (e, data) {
                    var id = data.selected[0];
                    $("#areaid").attr("value", id);
                    if (id == 0) {
                        $("#usertable").bootstrapTable('refresh', {url: '/NAreaUser?type=2', silent: true});
                    } else {
                        $("#usertable").bootstrapTable('refresh', {
                            url: '/userByArea?id=' + id + '&type=2',
                            silent: true
                        });
                    }
                });
            }
        });
    });

    //根据状态筛选
    function UserType(key) {
        var a = $("#areaid").val();
        var $a = "#a-table";
        if (key === 4) {//停用
            $('#usertable').bootstrapTable('refresh', {url: '/seekUser/' + a + ',3,2', silent: true});
            $($a).find("a[onclick='UserType(4)']").attr("class","text-success font-bold");
            $($a).find("a[onclick='UserType(3)']").attr("class","text-muted");
            $($a).find("a[onclick='UserType(2)']").attr("class","text-muted");
            $($a).find("a[onclick='UserType(1)']").attr("class","text-muted");
        }
        if (key === 3) {//到期
            $('#usertable').bootstrapTable('refresh', {url: '/seekUser/' + a + ',2,2', silent: true});
            $($a).find("a[onclick='UserType(3)']").attr("class","text-success font-bold");
            $($a).find("a[onclick='UserType(1)']").attr("class","text-muted");
            $($a).find("a[onclick='UserType(2)']").attr("class","text-muted");
            $($a).find("a[onclick='UserType(4)']").attr("class","text-muted");
        }
        if (key === 2) {//正常
            $('#usertable').bootstrapTable('refresh', {url: '/seekUser/' + a + ',1,2', silent: true});
            $($a).find("a[onclick='UserType(2)']").attr("class","text-success font-bold");
            $($a).find("a[onclick='UserType(1)']").attr("class","text-muted");
            $($a).find("a[onclick='UserType(3)']").attr("class","text-muted");
            $($a).find("a[onclick='UserType(4)']").attr("class","text-muted");
        }
        if (key === 1) {//全部
            if (a == 0) {
                $('#usertable').bootstrapTable('refresh', {url: '/NAreaUser?type=2', silent: true});
                $($a).find("a[onclick='UserType(1)']").attr("class","text-success font-bold");
                $($a).find("a[onclick='UserType(2)']").attr("class","text-muted");
                $($a).find("a[onclick='UserType(3)']").attr("class","text-muted");
                $($a).find("a[onclick='UserType(4)']").attr("class","text-muted");
            } else {
                $('#usertable').bootstrapTable('refresh', {url: '/userByArea?id=' + a + '&type=2', silent: true});
                $($a).find("a[onclick='UserType(1)']").attr("class","text-success font-bold");
                $($a).find("a[onclick='UserType(2)']").attr("class","text-muted");
                $($a).find("a[onclick='UserType(3)']").attr("class","text-muted");
                $($a).find("a[onclick='UserType(4)']").attr("class","text-muted");
            }
        }
    }


</script>

</body>

</html>
